<template name="goodBottom">
	<view class="goodBtm">
		<text class="stockNull" v-if="goodData.stock<1">课程已售罄啦~</text>
		<text class="stockNull" v-if="goodData.running!=1">该课程已下架</text>
		<view class="priceBox" v-if="goodData.stock>0 && goodData.running==1">

			<text class="iconfont icon-info"></text>
			<text>预约金:</text>
			<text class="yyPrice">￥{{goodData.prepay.toFixed(2)}}</text>
			<text>满意再付:</text>
			<text class="zaifu">￥{{(goodData.price-goodData.prepay).toFixed(2)}}</text>
		</view>
		<view class="goodOp">
			<!-- #ifndef H5 -->
			<!-- <view class="item" @tap="zixun">
				<text class="iconfont icon-message"></text>
				<text>咨询</text>
			</view> -->
			<!-- #endif -->

			<view class="item" @tap="toPage" :data-id="shopInfo.id" data-url="shopDetail">
				<text class="iconfont icon-shoucangdianjia"></text>
				<text>店铺</text>
			</view>
			
			<view class="item" @tap="share" >
				<text class="iconfont icon-fenxiang1"></text>
				<text>分享</text>
			</view>
			<!-- #ifndef H5 -->
			<view class="item" @tap="guanzhu">
				<text class="iconfont" :class="[goodData.fav==1?'icon-likefill':'icon-like']"></text>
				<text>{{goodData.fav==1?'已关注':'关注'}}</text>
			</view>
			<!-- #endif -->
			<view class="btnBox2" v-if="isLogin && userInfo.code && discountPrice">
				
				<button @tap="addCar" :disabled="goodData.stock<1 || goodData.running!=1">加入购物车</button>
				<!-- #ifdef H5 -->
				<a id="toApp" href="javascript:;" data-url="goodDetail" onclick="toApp()" :data-id="goodData.id"></a>
				<!-- #endif -->
				<button @tap="buy" :disabled="goodData.stock<1 || goodData.running!=1">
					<text>立即抢购</text>
					<text>(赚￥{{yongjin}})</text>
				</button>
			</view>
			<view class="btnBox" v-else>
				
				<button @tap="addCar" :disabled="goodData.stock<1 || goodData.running!=1">加入购物车</button>
				<!-- #ifdef H5 -->
				<a id="toApp" href="javascript:;" data-url="goodDetail" onclick="toApp()" :data-id="goodData.id"></a>
				<!-- #endif -->		
				<button @tap="buy" :disabled="goodData.stock<1 || goodData.running!=1">立即抢购</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		name: 'goodBottom', //组件名称
		// 传递参数
		props: {
			resouceData: {
				type: Object,
				default: ()=>{
					return {
						leftSeconds:1,
						stock:2,
						running:1
					}
				}
			},
			discountPrice:0
		},
		watch: {
			resouceData(newVal) {
				this.goodData = newVal;
				this.shopInfo = newVal.store;
				this.mtd1();
			}
		},
		// 组件参数
		data() {
			return {
				shopInfo: {},
				goodData: {
					stock:2,
					running:1,
					prepay:0,
					price:0
				},
				yongjin:0
			}
		},
		// 组件方法
		methods: {
			
			share() {
				this.$parent.showPoster();
			},
			mtd1() {
				this.goodData = this.resouceData;
				this.shopInfo = this.resouceData.store;
				this.yongjin=0;
				if(this.discountPrice){
					this.yongjin=this.discountPrice
				}
			},
			addCar() {
				if (this.isLogin) {
					this.$store.dispatch("apiAddGoodToCar", {
						userId: this.userInfo.userId,
						courseId: this.goodData.id,
						num: 1
					}).then(res => {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						});
						// this.toPage("car")
					})
				} else {
					// this.toPage({
					// 	url: 'login',
					// 	gid: this.goodData.id,
					// 	to: 'addCar'
					// })
					this.$parent.open();
				}
			},
			buy() {
				if (this.isLogin) {
					let cfmArr = [this.goodData];
					uni.setStorage({
						key: 'confirmList',
						data: cfmArr,
						complete: () => {
							this.toPage({
								url: 'confirmOrder'
							})
						}
					})

				} else {
					// let cfmArr = [this.goodData];
					// uni.setStorage({
					// 	key: 'confirmList',
					// 	data: cfmArr,
					// 	complete: () => {
					// 		this.toPage({
					// 			url: 'login',
					// 			to: 'confirmOrder'
					// 		})
					// 	}
					// })
					this.$parent.open();

				}
			},
			guanzhu() {
				if (this.isLogin) {
					this.$store.dispatch("apiFollowGood", {
						userId: this.userInfo.userId,
						linkId: this.goodData.id
					}).then(res => {
						if (res.data.code == 1) {
							if (this.goodData.fav == 0) {
								uni.showToast({
									title: '关注成功',
									icon: 'success'
								});
							} else {
								uni.showToast({
									title: '已取消关注',
									icon: 'success'
								});
							}
							uni.$emit("toggleGz",null)
							// this.$root.getData()
						}
					})
				} else {
					// this.toPage("login")
					this.$parent.open();
				}
			},
			// zixun() {
			// 	let _this = this;
			// 	if (this.isLogin) {
			// 		uni.showLoading({
			// 			title: '',
			// 			mask: false
			// 		});

			// 		let toImid = _this.shopInfo.imid;
			// 		if (getApp().globalData.TIM_SDK_READY) {
			// 			uni.hideLoading()
			// 			_this.toPage({
			// 				url: 'conversationDt',
			// 				cvid: 'C2C' + toImid,
			// 				toImId: toImid,
			// 			})
			// 		} else {
			// 			_this.$store.dispatch("timLogin", _this.userInfo.imid).then(res => {
			// 				setTimeout(() => {
			// 					uni.hideLoading()
			// 					_this.toPage({
			// 						url: 'conversationDt',
			// 						cvid: 'C2C' + toImid,
			// 						toImId: toImid,
			// 					})
			// 				}, 1000)
			// 			})
			// 		}
			// 	} else {
			// 		// this.toPage("login")
			// 		this.$parent.open();
			// 	}
			// },
		}
	}
</script>

<style lang="less" scoped>
	.goodBtm {
		position: fixed;
		width: 100%;
		height: 180upx;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		z-index: 2;

		.priceBox {
			height: 75upx;
			display: flex;
			align-items: center;
			background-color: #f8e4a9;
			padding: 0 50upx;
			flex-grow: 1;

			.iconfont {
				font-size: 40upx;
				color: #ff3b2b;
				margin-right: 16upx;
			}

			text {
				font-size: 32upx;
				color: #a17f68;
			}

			.yyPrice {
				color: #ff3b2b;
				font-size: 38upx;
				flex: 1;
			}

			.zaifu {
				color: #a17f68;
				font-size: 38upx;
			}
		}

		.stockNull {
			background-color: #333333;
			color: #FFFFFF;
			line-height: 75upx;
			text-align: center;
			font-size: 28upx;
		}

		.goodOp {
			height: 105upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			border-top: 1px solid #b5bac2;
			.item:first-child{
				margin-left: 28upx;
			}
			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				text {
					color: #6b6b6b;
					font-size: 20upx;
				}

				.iconfont {
					font-size: 48upx;
					color: #2c2c2c;
				}

				.icon-likefill {
					color: #ffcd11;
				}
			}

			.btnBox {
				display: flex;
				width: 440upx;
				height: 80upx;
				justify-content: flex-end;
				position: relative;

				button {
					width: 220upx;
					border: none;
					margin: 0;
					outline: none;
					height: 80upx;
					border-radius: 40upx 0 0 40upx;
					line-height: 80upx;
					font-size: 32upx;
					color: #FFFFFF;
					font-weight: bold;
					padding: 0;
					background: linear-gradient(to right, #ffc300, #ff9503);
				}

				button:after {
					border: none;
					outline: none;
				}

				button:last-child {
					border-radius: 0 40upx 40upx 0;
					background: linear-gradient(to right, #fe5828, #fe305b);
				}

				button[disabled=true] {
					color: #EEEEEE;
				}

				a {
					text-decoration: none;
					position: absolute;
					display: block;
					width: 100%;
					height: 100%;
					z-index: 555;
					top: 0;
					left: 0;
				}
			}
			.btnBox2{
				display: flex;
				width: 440upx;
				height: 105upx;
				justify-content: flex-end;
				position: relative;
				
				button {
					width: 220upx;
					border: none;
					margin: 0;
					outline: none;
					height: 105upx;
					font-size: 32upx;
					color: #FFFFFF;
					font-weight: bold;
					padding: 0;
					border-radius: 0;
					background: linear-gradient(to right, #ffc300, #ff9503);
				}
				
				button:after {
					border: none;
					outline: none;
				}
				button:first-child{
					line-height: 105upx;
				}
				button:last-child {
					background: linear-gradient(to right, #fe5828, #fe305b);
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text{
						margin: 0;
						line-height: 36upx;
					}
					text:last-child{
						line-height: 24upx;
						font-size: 24upx;
						font-weight: normal;
					}
				}
				
				button[disabled=true] {
					color: #EEEEEE;
				}
				
				a {
					text-decoration: none;
					position: absolute;
					display: block;
					width: 100%;
					height: 100%;
					z-index: 555;
					top: 0;
					left: 0;
				}
			}
		}
	}
</style>
